<script setup lang="ts">
import { ref, watch } from 'vue'
import { RouterView } from 'vue-router'
import { useRoute } from 'vue-router'
import AmapProSvg from './logo.vue'
import AmapPro from './AmapPro.png'
import VueAMAPPro from './VueAMAPPro.png'

const route = useRoute()
const activeIndex = ref('')

watch(
  () => route.path,
  newVal => {
    activeIndex.value = newVal
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <div class="logo">
    <AmapProSvg height="100"/>
    <img :src="VueAMAPPro" alt="" height="100px">
    <img :src="AmapPro" alt="" height="100px">
  </div>
  <el-menu
    router
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
  >
    <el-menu-item index="/amapFromSearch">form表单搜索</el-menu-item>
    <el-menu-item index="/geocoder">geocoder</el-menu-item>
  </el-menu>
  <div class="content">
    <router-view v-slot="{ Component, route }">
      <component :is="Component" :key="route.fullPath" />
    </router-view>
  </div>
</template>

<style lang="scss" scoped>
.logo{
  width: 100%;
  height: 100px;
  display: flex;
}
.content {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px;
}
</style>
